{% for user in site.data.users %}
  {% assign mod = forloop.index | minus:1 | modulo:3 %}
  {% if mod != 0 %}
  {% continue %}
  {% endif %}

  {% assign offset = forloop.index | minus:1 %}

  <div class="row">
    {% for user in site.data.users limit:3 offset:offset %}
      <div class="col-md-4 friend"
           id="user-logo-{{offset}}-{{forloop.index}}">
        <div class="user-container">
          <a href="{{user.url}}" rel="nofollow" alt="{{user.name}}">
            <img src="../user-logos/{{user.logo}}">
          </a>
        </div>
        <div class="details user-detail fade-out"
          id="user-details-{{offset}}-{{forloop.index}}">
          <p><em>{{user.name}}</em> : {{user.how}}</p>
        </div>
      </div>

      <script type="text/javascript">
        var logo = document.getElementById("user-logo-{{offset}}-{{forloop.index}}");
        logo.onmouseover = function() {
          var allDetails = document.querySelectorAll(".user-detail");
          for (var i = 0; i < allDetails.length; i++) {
            var details = allDetails[i];
            details.className = details.className.replace(" fade-in", "");
            details.className = details.className.replace(" fade-out", "");
            details.className += " fade-out";
          }

          var details = document.getElementById("user-details-{{offset}}-{{forloop.index}}");
          details.className = details.className.replace(" fade-in", "");
          details.className = details.className.replace(" fade-out", "");
          details.className += " fade-in";
        };

        logo.onmouseout = function() {
          var details = document.getElementById("user-details-{{offset}}-{{forloop.index}}");
          details.className = details.className.replace(" fade-in", "");
          details.className = details.className.replace(" fade-out", "");
          details.className += " fade-out";
        };
      </script>
    {% endfor %}

</div>

{% endfor %}
